<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)

</script>

<template>

    <el-form :model="config" label-width="80px">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <el-form-item label="默认提示">
            <el-input type="text" v-model="config.label" />
        </el-form-item>
        <!-- <el-form-item label="表单名">
            <el-input type="text" v-model="config.name" />
        </el-form-item> -->
        <el-form-item label="字号">
            <el-input-number type="number" :min="0" v-model="config.fontSize"></el-input-number>
        </el-form-item>
        <el-form-item label="字颜色">
            <el-color-picker v-model="config.color" />
        </el-form-item>
        <el-form-item label="背景颜色">
            <el-color-picker v-model="config.backgroundColor" />
        </el-form-item>
        <el-form-item label="圆角">
            <el-slider v-model="config.borderRadius" :max="100" />
        </el-form-item>
        <el-form-item label="边框颜色">
            <el-color-picker v-model="config.borderColor" />
        </el-form-item>
        <el-form-item label="边框粗度">
            <el-slider v-model="config.borderWidth" :max="100" />
        </el-form-item>
        <!-- <el-form-item label="链接地址">
            <el-input type="text" v-model="config.url" />
        </el-form-item> -->
        <!-- <el-form-item label="自定义项">
            <el-input type="text" v-model="config.define" />
        </el-form-item> -->
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>

</template>

<style scoped>
</style>